<template>
  <a-row class="container backGoods">
    <a-row class="title-item"> 设备退回信息 </a-row>
    <a-form-model layout="inline" @submit="handleSubmit" @submit.native.prevent :colon="false" style="margin-bottom: 12px">
      <a-form-model-item label="关键字">
        <a-input v-model="searchKey" placeholder="请输入物资名称/型号" />
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" html-type="submit">搜索</a-button>
      </a-form-model-item>
    </a-form-model>
    <div class="border">
        <my-table style="min-height: 92%" :rowKey="(record) => record.id" :columns="columns" :data-source="datas" :pagination="false"></my-table>
        <div class="page-box">
          <a-pagination :show-total="(total) => `共 ${total}条记录`" v-model="current" :total="total" :defaultPageSize="size" :item-render="itemRender" @change="pagechangeFn"/>
        </div>
    </div>
  </a-row>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      total: 0,
      current: 1,
      size: 10,
      searchKey:"",  // 关键字搜索
      datas: [],
      columns: [
        {
          title: "序号",
          dataIndex: "id",
          align: "center",
          width: "90",
          customRender: (text, record, index) =>
            `${(this.current - 1) * this.size + index + 1}`,
        },
        {
          title: "退回区域",
          dataIndex: "areaName",
          align: "center",
        },
        {
          title: "物资名称",
          dataIndex: "name",
          align: "center",
        },
        {
          title: "物资型号",
          dataIndex: "version",
          align: "center",
        },
        {
          title: "退回数量",
          dataIndex: "number",
          align: "center",
          width: "120",
        },
        {
          title: "退回时间",
          dataIndex: "time",
          align: "center",
        },
        {
          title: "退回备注",
          dataIndex: "notes",
          align: "center",
        },
        // {
        //   title: "操作",
        //   dataIndex: "address",
        //   align: "center",
        //   width: "20%",
        //   scopedSlots: { customRender: "action" },
        // },
      ],
    };
  },
  methods: {
    handleSubmit(){
      this.current = 1;
      this.getdata()
    },
    getdata() {
      let data = {
        currentPage: this.current,
        pageSize: this.size,
        searchKey:this.searchKey
      };
      this.$api.getbackgoodsinfo(data).then((res) => {
        this.datas = res.data.data.records;
        this.datas.forEach((item, index) => {
          item.time = moment(item.time).format("YYYY-MM-DD");
        });
        this.total = res.data.data.total;
      });
    },
    // 分页器
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a> 上一页 </a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      this.current = page;
      this.getdata();
    },
  },
  mounted() {
    this.getdata();
  },
};
</script>
<style scoped src = "../../../assets/style/pollution.css"></style>
<style scoped lang = "scss">
.h2 {
  color: #37ddc0;
  line-height: 40px;
  margin-left: 30px;
}

.border {
  height: calc(100% - 80px);
}

.list-left {
  height: calc(100% - 40px);
  overflow-y: auto !important;
  overflow-x: hidden;

  &::-webkit-scrollbar {
    height: 14px;
    width: 14px;
    border: 1px solid #207064;
  }

  &::-webkit-scrollbar-thumb {
    //border-radius: 10px;
    background-color: #207064;
  }

  &::-webkit-scrollbar-track {
    border-radius: 0;
    background: transparent;
  }

  &::-webkit-scrollbar-corner {
    width: 0;
    height: 0;
    background: transparent;
  }
}

.title-item {
  /* border: 1px solid yellow; */
  height: 50px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.beijing {
  margin-left: 20px;
}

.wen {
  color: #9fb043;
}

.zi {
  color: #bebebe;
  text-align: center;
}

.exportbtn {
  background-color: transparent;
  border: 0;
  color: #207064;
  margin-top: 10px;
}

.c {
  display: flex;
  justify-content: space-between;
}

::v-deep .ant-tree {
  font-size: 16px;
}

::v-deep .a[data-v-0c7937d1] {
  border-right: none;
}

::v-deep .ant-table-thead > tr > th {
  border-bottom: none;
}

::v-deep li.ant-tree-treenode-disabled > span:not(.ant-tree-switcher),
::v-deep li.ant-tree-treenode-disabled > .ant-tree-node-content-wrapper,
::v-deep li.ant-tree-treenode-disabled > .ant-tree-node-content-wrapper span {
  color: rgba(255, 255, 255, 0.8) !important;
}

::v-deep.ant-tree.ant-tree-directory
  > li
  span.ant-tree-node-content-wrapper:hover::before,
.ant-tree.ant-tree-directory
  .ant-tree-child-tree
  > li
  span.ant-tree-node-content-wrapper:hover::before {
  background: transparent;
}

::v-deep
  .ant-tree.ant-tree-directory
  .ant-tree-child-tree
  > li.ant-tree-treenode-selected
  > span.ant-tree-node-content-wrapper::before {
  border: 2px solid #207064;
  background: #1a2223;
  margin: 0 20px 0 20px;
}

::v-deep .ant-tree li .ant-tree-node-content-wrapper {
  color: #bebebe;
}

::v-deep
  .ant-tree.ant-tree-directory
  .ant-tree-child-tree
  > li
  span.ant-tree-node-content-wrapper.ant-tree-node-selected {
  color: #37ddc0;
}

::v-deep .ant-table-tbody > tr.ant-table-row-selected td {
  background: transparent;
}


/* 分页 */
.page-box {
  margin-top: 12px;
  float: right;
}

.totalclass {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin-right: 20px;
}

::v-deep.ant-form-item-control {
  width: 200px;
}

a {
  color: #207064;
}


</style>
<style lang = 'scss'>
.backGoods {
  .ant-tree li .ant-tree-node-content-wrapper:hover {
    background: #2d4e47;
  }

  .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
    // background: transparent !important;
    background-color: #2d4e47;
  }
}

.container {
  height: 100%;
  width: 100%;
  padding: 1%;
  .title-item{
    margin: 0;
    height: auto;
  }
}


.solvebtn {
  color: #207064;
}
.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link{
  background-color: transparent;
  border:none;
}
</style>
